<template>
  <a-form layout="vertical" class="listSearchWrap vehicleVersionSearch table-page-search-wrapper">
    <a-row :gutter="[16, 0]">
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="5"
        :xl="4"
        :xxl="4">
        <a-form-model-item :label="$t('applycontent')">
          <a-input
            v-model.trim="queryParams.instanceName"
            :placeholder="$t('pleaseInput') + $t('applycontent')"
            :maxLength="50"
            @keyup.enter="handleSearch"
          />
        </a-form-model-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="4"
        :xl="4"
        :xxl="4">
        <a-form-model-item :label="$t('businessType')">
          <a-select
            v-model="queryParams.businessCode"
            mode="multiple"
            :allowClear="true"
            :filterOption="$commonFun.filterOption"
            :placeholder="$t('pleaseSelect') + $t('businessType')"
            showSearch>
            <a-select-option v-for="item in businessSlectOptions" :key="item.value" >{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="5"
        :xl="5"
        :xxl="5">
        <a-form-model-item :label="$t('timeOfCreation')">
          <a-range-picker
            :value="defaultDateRange2"
            :getCalendarContainer="showtoBody()"
            @change="onCreateRangeChange"
            :disabledDate="disabledBehindDate"
            :placeholder="[$t('startTime'), $t('endTime')]"
            :allow-clear="true"
            style="width:100%;"
          />
        </a-form-model-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="5"
        :xl="5"
        :xxl="5"
        class="btnWarp">
        <a-form-model-item :label="$t('reviewDoneTime')">
          <div style="position:relative">
            <a-range-picker
              :getCalendarContainer="showtoBody()"
              :value="defaultDateRange1"
              @change="onEndRangeChange"
              :disabledDate="disabledBehindDate"
              :placeholder="[$t('startTime'), $t('endTime')]"
              :allow-clear="true"
              style="width:100%;"
            /></div>
        </a-form-model-item>
      </a-col>
      <a-col
        :xs="24"
        :sm="24"
        :md="8"
        :lg="5"
        :xl="5"
        :xxl="5">
        <a-form-item class="searchBtns" style="margin-top: 23px;">
          <a-button-group>
            <a-button
              type="primary"
              @click="handleSearch"
              style="margin-right: 0;"
            >
              <i class="iconfont icon-chazhao"></i>
              {{ $t('inquiry') }}
            </a-button>
            <a-button @click="clearCondition">
              <i class="iconfont icon-qingkong"></i>
              {{ $t('clear') }}
            </a-button>
          </a-button-group>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import { mapState } from 'vuex'
import moment from 'moment'
import AuthButton from '@/components/AuthButton'
import { flowPerms } from '@/config/permission/index'
import CarModelSelect from '@/views/components/CarModelSelect'
import EditItem from '@/components/EditItem'
export default {
  components: {
    AuthButton,
    CarModelSelect,
    EditItem
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.myApply.queryParamsAll
    }),
    // 审核结束日期选择的默认值
    defaultDateRange1 () {
      if (this.queryParams.endTimeBefore && this.queryParams.endTimeAfter) {
        return [moment(this.queryParams.endTimeBefore), moment(this.queryParams.endTimeAfter)]
      }
      return []
    },
    // 创建日期选择的默认值
    defaultDateRange2 () {
      if (this.queryParams.createTimeBefore && this.queryParams.createTimeAfter) {
        return [moment(this.queryParams.createTimeBefore), moment(this.queryParams.createTimeAfter)]
      }
      return []
    }
  },
  data () {
    return {
      flowPerms,
      businessSlectOptions: []
    }
  },
  watch: {},
  created () {
    // 业务类型下拉选项 查询字典
    this.$api.getBusinessTypeDictCodes().then(res => {
      this.businessSlectOptions = this.$options.filters.sortByFirstLetter(res.data)
    })
  },
  methods: {
    // 解决选择器被容器遮挡的问题
    showtoBody () {
      return () => document.body
    },
    // 审核完成日期选择
    onEndRangeChange (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.endTimeBefore = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.endTimeAfter = dateString[1]
    },
    // 创建日期选择
    onCreateRangeChange (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.createTimeBefore = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.createTimeAfter = dateString[1]
    },
    // 点击查询
    handleSearch () {
      this.$emit('clickbtn')
    },
    // 清空重置搜索条件
    clearCondition () {
      this.$store.commit('resetAllApplyQueryParams')
      this.handleSearch()
    },
    // 日期选择的禁选日期
    disabledBehindDate (current) {
      return current && current > moment().endOf('day')
    }
  }
}
</script>
<style lang="less" scoped>
 ::v-deep .ant-form-item-label {
  padding-bottom: 2px;
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
</style>
